<template>
    <div class="sort-list">
        <div id="tags" v-if="tags.tag">
            <div>标签</div>
            <ul id="tags-list" >
                <li class="tags-item" v-for="item in tags.tag" :key="item.mid">
                       <router-link :to="{name:'blogSortDetail',params:{mid:item.mid,type:1}}"   class="router">
                       {{item.name}}
                        </router-link>
                </li>
            </ul>
        </div>

        <div id="categories" v-if="sorts.sort">
            <div>分类</div>
            <ul id="categories-list">
                <li class="categories-item"  v-for="item in sorts.sort" :key="item.mid">
                    <router-link :to="{name:'blogSortDetail',params:{mid:item.mid,type:0}}"   class="router">
                        {{item.name}}
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="block">
            <el-timeline>
                <el-timeline-item  placement="top" v-for="item in blogs.blog">
                    <router-link :to="{name:'blogDetail',params:{aid:item.aid}}"   class="router2">
                        {{item.publish}}    {{item.name}}
                    </router-link>
                </el-timeline-item>
            </el-timeline>
        </div>

    </div>
</template>

<script>
    import {getBlogSort }from "@/api/blogsort"
    import {ref,reactive} from 'vue';
    import {getArticleList} from '@/api/index'
    export default {
        name: "归档",
        setup(){
            //获取标签
            const queryTag=reactive({
                type:'1',
            });
            const tags=reactive({tag:[]})
            getBlogSort(queryTag).then(res=>{
                tags.tag=res.data.data;

            });

            //获取分类
            const querySort =reactive({
                type:'0',
            });
            const sorts=reactive({ sort:[]})
            getBlogSort(querySort).then(res=>{
                sorts.sort=res.data.data;
            });
            const current =ref(1);
            const total =ref(0);
            const PageSize=ref(0);
            const blogs= reactive({blog:[]});
            getArticleList(current.value).then(res=>{
                blogs.blog = res.data.data.records;
                total.value = res.data.data.total;
                PageSize.value =res.data.data.size;
                //url.value=res.data.data.imgUrl;
                // current.value=res.data.data.current; //能用但是报错
            });
            return {tags,sorts,blogs}
        }
    }
</script>

<style  lang="scss" scoped>
    .router{
        transition: all .24s ease;
        color:#fff;
        text-decoration: none;
    }
    .router2{
        transition: all .24s ease;
        color: #333;
        text-decoration: none;
    }
    .sort-list{
        margin-left: 16.66667%;
        width: 66.66667%;
    }
    #tags{
        margin: 30px 0;
        position: relative;
        >div{
            font-size: 2.5rem;
            position: relative;
            color: rgba(0,0,0,0.6);
            padding: 0 0 0 20px;
            margin: 0 0 20px 0;
            text-shadow: 0 0 5px #b2b2b2;
        }
    }
    #tags-list{
        margin: 0;
        padding: 0 0 0 40px;
        .tags-item{
            font-size: 15px;
            line-height: 15px;
            list-style: none;
            padding: 5px 8px;
            margin: 4px 10px;
            height: 15px;

            display: inline-block;
            position: relative;
            word-break: break-all;
            background-color: rgba(0,0,0,0.6);
            border-radius: 0 5px 5px 0;

        }
        .tags-item:before{
            border-top: 12.5px solid transparent;
            border-right: 10px solid rgba(0,0,0,0.6);
            border-bottom: 12.5px solid transparent;
            content: "";
            height: 0;
            position: absolute;
            top: 0;
            left: -10px;
            width: 0;
        }
        .tags-item:after{
            background-color: #f2f2f2;
            /* border-radius: 50%; */
            content: "";
            height: 4px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -4px;
            width: 4px;
        }
    }

    #categories{
        margin: 30px 0;
        position: relative;
        >div{
            font-size: 2.5rem;
            position: relative;
            color: rgba(0,0,0,0.6);
            padding: 0 0 0 20px;
            margin: 0 0 20px 0;
            text-shadow: 0 0 5px #b2b2b2;
        }
    }
    #categories-list{
        margin: 0;
        padding: 0 0 0 40px;
        .categories-item{
            font-size: 15px;
            line-height: 15px;
            list-style: none;
            padding: 5px 8px;
            margin: 4px 10px;
            height: 15px;
            display: inline-block;
            position: relative;
            word-break: break-all;
            background-color: rgba(0,0,0,0.6);
            border-radius: 0 5px 5px 0;

        }
        .categories-item:before{
            border-top: 12.5px solid transparent;
            border-right: 10px solid rgba(0,0,0,0.6);
            border-bottom: 12.5px solid transparent;
            content: "";
            height: 0;
            position: absolute;
            top: 0;
            left: -10px;
            width: 0;
        }
        .categories-item:after{
            background-color: #f2f2f2;
            /* border-radius: 50%; */
            content: "";
            height: 4px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -4px;
            width: 4px;
        }
    }
    .box-card{
        width: 800px;
        margin: 50px auto;
        padding: 15px;
        background: #fff;
        border-radius: 10px;
        background-color: #f2f2f2;

    }
    .blog-title{
        text-align: center;
        font-size: 1.5rem;
        margin: 20px auto;
    }
    .blog-meta{
        text-align: center
    }
</style>